<!DOCTYPE html>
<html>
<head>
    <style>
        #iframeContainer {
            width: 100%;
            height: 500px;
            position: relative;
            resize: both;
            overflow: auto;
        }

        #iframeContainer iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        #myIframe {
            resize: both;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        <button id="page1Btn">Page 1</button>
        <button id="page2Btn">Page 2</button>
        <button id="zoomInBtn">放大</button>
        <button id="zoomOutBtn">缩小</button>
        <button id="autoWidthBtn">自动调整页宽</button>
    </div>
    <div id="iframeContainer">
        <iframe id="myIframe" src="https://www.example.com/" style="width: 300px; height: 300px;"></iframe>
    </div>

    
</body>
</html>    
<script>
    const iframe = document.getElementById('myIframe');
    const zoomInBtn = document.getElementById('zoomInBtn');
    const zoomOutBtn = document.getElementById('zoomOutBtn');
    const autoWidthBtn = document.getElementById('autoWidthBtn');

    zoomInBtn.addEventListener('click', () => {
        iframe.style.width = (parseInt(iframe.style.width) + 50) + 'px';
        iframe.style.height = (parseInt(iframe.style.height) + 50) + 'px';
    });

    zoomOutBtn.addEventListener('click', () => {
        iframe.style.width = (parseInt(iframe.style.width) - 50) + 'px';
        iframe.style.height = (parseInt(iframe.style.height) - 50) + 'px';
    });

    autoWidthBtn.addEventListener('click', () => {
        iframe.style.width = '100%';
    });

    const page1Btn = document.getElementById('page1Btn');
    const page2Btn = document.getElementById('page2Btn');

    page1Btn.addEventListener('click', () => {
        iframe.src = 'https://www.example1.com/'; // 将这里的 URL 替换为你想要加载的第一个网页的 URL
    });

    page2Btn.addEventListener('click', () => {
        iframe.src = 'https://www.example.com/'; // 将这里的 URL 替换为你想要加载的第二个网页的 URL
    });
</script>